<template>
  <div class="" style="height: 100%; width: 100%">
    <tongyongbasechart :options="options" ref="reffuhe" />
  </div>
</template>
<script>
export default {
  name: "zjnchart26",
  components: {},
  data() {
    return {
      options: {},
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.gongreliangzhanbi": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  mounted() {
    let scale = this.$root.setting.scale;
    let option = {};
    var offset = 0;

    option = {
      title: {
        // text: "某手机特征",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: [""],
        show: false,
      },
      grid: {
        top: "20%",
        left: "20%",
        right: "20%",
        bottom: "20%",
        // containLabel: true
      },
      radar: [
        {
          indicator: [
            { text: "能耗", max: 1 },
            { text: "供热量", max: 1 },
            { text: "售热量", max: 1 },
            { text: "告警", max: 1 },
            { text: "减碳", max: 1 },
          ],
          name: {
            textStyle: {
              fontSize: "40",
              color: "#6B99B7",
            },
          },
          splitNumber: 5,
          splitArea: {
            areaStyle: {
              color: [
                "rgba(224,134,82, 0.1)",
                "rgba(224,134,82, 0.2)",
                "rgba(224,134,82, 0.4)",
                "rgba(224,134,82, 0.6)",
                "rgba(224,134,82, 0.8)",
                "rgba(224,134,82, 1)",
              ].reverse(),
            },
          },
          label: {
            show: true,
            color: "#6B99B7",
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "#FFFFFF",
            fontSize: 36,
            formatter: function (value, index) {
              offset++;
              if (offset < 6) {
                if (value === 0.4) {
                  return [
                    "{yxStyle|优秀}",
                    "{lhStyle|良好}",
                    "{pjStyle|平均}",
                    "{jdStyle|较低}",
                    "{jcStyle|较差}",
                  ].join("\n");
                }
              }
            },
            rich: {
              jcStyle: {
                color: "rgb(203, 119, 155)",
                fontSize: 24,
                width: 250,
                height: 30,
                align: "right",
              },
              jdStyle: {
                color: "rgb(177, 158, 66)",
                fontSize: 24,
                width: 250,
                height: 30,
                align: "right",
                padding: [5, 30],
              },
              pjStyle: {
                color: "rgb(87, 217, 254)",
                fontSize: 24,
                width: 250,
                height: 20,
                align: "right",
                padding: [5, 70],
              },
              lhStyle: {
                color: "rgb(147, 194, 255)",
                fontSize: 24,
                width: 250,
                height: 30,
                align: "right",
                padding: [5, 100],
              },
              yxStyle: {
                color: "rgb(46, 208, 213)",
                fontSize: 24,
                width: 250,
                height: 30,
                align: "right",
                padding: [5, 140],
              },
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgb(1,166,229,0.7)",
            },
          },
          center: ["50%", "50%"],
          // radius: 300,
        },
      ],
      series: [
        {
          type: "radar",
          symbolSize: [8, 8],
          lineStyle: {
            color: "#0099ff",
          },
          itemStyle: {
            borderWidth: 3,
            color: "#0099ff",
            borderColor: "#0099ff",
            shadowBlur: 8,
            shadowColor: "#0099ff",
          },
          areaStyle: {
            color: "#0099ff00",
          },
          data: [
            {
              value: [0.6, 0.7, 0.8, 0.4, 0.9],
              name: "",
            },
          ],
        },
      ],
    };

    this.options = option;
  },
  methods: {
    loadData(n) {
      let scale = this.$root.setting.scale;
      this.options.series[0].data = [];
      //m_012qc
      n.map((item) => {
        this.options.series[0].data.push({
          value: Number(Math.abs(Number(item["m_012qc"])) / 10000).toFixed(2),
          name: item.name,
        });
      });
      this.options.series[0].data.sort(function (a, b) {
        return a.value - b.value;
      }),
        this.$refs.reffuhe.myChart.setOption(this.options);
      // this.options
    },
  },
};
</script>
<style lang='scss' scoped>
</style>